<template>
	<div>
		<!-- 1.0 头部导航结构 -->
		<MyNavbar title="我的跟帖"></MyNavbar>
		<!-- 2.0 评论列表 -->
		<div class="list">
			<div class="item" v-for="item in commentList" :key="item.id">
				<p class="date">{{ item.create_date | formatTime }}</p>
				<!-- 被回复的评论(父评论)， 有父评论的时候渲染 -->
				<div class="parent" v-if="item.parent">
					<p class="parent_username">回复：{{ item.parent.user.nickname }}</p>
					<p class="parent_comment">{{ item.parent.content }}</p>
				</div>
				<!-- 我的评论 -->
				<p class="comment">{{ item.content }}</p>
				<!-- 原文链接 -->
				<p class="article">
					<router-link class="article_link" :to="`/article?id=${item.post.id}`">
						原文：{{ item.post.title }}
					</router-link>
				</p>
			</div>
		</div>
		<!-- 3.0 空列表提示 -->
		<van-empty v-if="!commentList.length" description="空空如也" />
	</div>
</template>

<script>
import { getUserCommentAPI } from '../api/user.js';
import MyNavbar from '../components/MyNavbar.vue';
export default {
	components: {
		MyNavbar
	},
	data() {
		return {
			commentList: []
		};
	},
	async created() {
		this.commentList = (await getUserCommentAPI()).data.data;
		// console.log(result)
	}
};
</script>

<style lang="less" scoped>
.list {
	.item {
		padding: 10px;
		border-bottom: 1px solid #ddd;
		p {
			margin: 10px 0;
		}
		.date {
			color: #999;
			font-size: 13px;
		}

		.comment {
			font-size: 14px;
		}

		.article {
			font-size: 14px;
			color: #999;
			display: flex;
		}
		.article_link {
			color: inherit;
			width: 90%;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
	.parent {
		background-color: #e4e4e4;
		color: #666;
		font-size: 12px;
		padding: 5px;
	}
}
</style>
